<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sloaner百宝箱</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>✨ Sloaner百宝箱 ✨</h1>
            <p class="subtitle">实用工具集合，助你事半功倍！</p>
        </header>

        <main class="tools-grid">
            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-edit"></i></div>
                <h3>Markdown编辑器</h3>
                <p>轻松编辑Markdown文档</p>
                <a href="https://ysloaner-markdown-editor.onrender.com/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-exchange-alt"></i></div>
                <h3>数据格式转换工具</h3>
                <p>在不同数据格式间转换</p>
                <a href="https://ysloaner-dft.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-file-alt"></i></div>
                <h3>文件格式转换工具</h3>
                <p>转换各种文件格式</p>
                <a href="https://ysloaner-fileformat.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-qrcode"></i></div>
                <h3>QR二维码生成工具</h3>
                <p>生成自定义二维码</p>
                <a href="https://ysloaner-qr.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-ruler-combined"></i></div>
                <h3>单位转换器</h3>
                <p>不同单位间快速转换</p>
                <a href="https://ysloaner-conversion.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-language"></i></div>
                <h3>语言翻译器</h3>
                <p>多语言翻译工具</p>
                <a href="https://ysloaner-language-translator.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-file-signature"></i></div>
                <h3>批量重命名文件工具</h3>
                <p>高效批量重命名文件</p>
                <a href="https://sloaner-rename.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-random"></i></div>
                <h3>抽签器工具</h3>
                <p>随机抽签功能</p>
                <a href="https://ysloner-ld.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-images"></i></div>
                <h3>批量处理图片</h3>
                <p>批量处理和编辑图片</p>
                <a href="https://ysloaner-manipulate-image.onrender.com" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-clock"></i></div>
                <h3>计时器工具</h3>
                <p>定时和计时功能</p>
                <a href="https://sloaner-timer.onrender.com/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-book"></i></div>
                <h3>四级单词能量站</h3>
                <p>英语四级单词学习</p>
                <a href="https://yslaoner-lfe.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-code"></i></div>
                <h3>base64编码器</h3>
                <p>Base64编码和解码</p>
                <a href="https://yslaoner-base64-encoder.onrender.com/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-calculator"></i></div>
                <h3>多功能计算器</h3>
                <p>强大的计算功能</p>
                <a href="https://ysloaner-mfc.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-sitemap"></i></div>
                <h3>思维导图工具</h3>
                <p>创建和编辑思维导图</p>
                <a href="https://ysloaner-mind.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-align-left"></i></div>
                <h3>文本对比工具</h3>
                <p>比较文本差异</p>
                <a href="https://sloaner-text-comparison.onrender.com/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-tasks"></i></div>
                <h3>个人待办事项</h3>
                <p>管理你的待办事项</p>
                <a href="https://ysloaner-todos.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-brain"></i></div>
                <h3>MBTI测试</h3>
                <p>MBTI性格测试</p>
                <a href="https://ysloaner-mbti-test.onrender.com/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-map-marker-alt"></i></div>
                <h3>IP查询工具</h3>
                <p>查询您的IP地址和位置信息</p>
                <a href="https://ysloaner-ip-query.onrender.com" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-lock"></i></div>
                <h3>密码强度检测器</h3>
                <p>检测您的密码强度</p>
                <a href="https://ysloaner-psc.onrender.com" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-sitemap"></i></div>
                <h3>目录树生成器</h3>
                <p>快速生成目录树结构</p>
                <a href="https://ysloaner-ctg.onrender.com" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-code"></i></div>
                <h3>ASCLL码转换器</h3>
                <p>支持ASCLL码的字符转换</p>
                <a href="https://ysloaner-ascllcoder.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-code"></i></div>
                <h3>正则表达式匹配</h3>
                <p>测试和匹配正则表达式</p>
                <a href="https://sloaner-re-html.onrender.com" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-calendar-alt"></i></div>
                <h3>日期间隔计算</h3>
                <p>计算两个日期之间的时间间隔</p>
                <a href="https://sloaner-date-calculation.onrender.com" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-key"></i></div>
                <h3>密码生成器</h3>
                <p>生成安全强密码</p>
                <a href="https://sloaner-spg.onrender.com/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-chalkboard"></i></div>
                <h3>白板工具</h3>
                <p>在线白板协作工具</p>
                <a href="https://ysloaner-whiteboard.onrender.com" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-signature"></i></div>
                <h3>签名生成器</h3>
                <p>生成个性化签名</p>
                <a href="https://ysloaner-sg.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-weight"></i></div>
                <h3>BMI计算器</h3>
                <p>计算您的身体质量指数</p>
                <a href="https://ysloaner-bmi-calculator.onrender.com" target="_blank" class="tool-link">访问工具</a>
            </div>

            <!-- 新增音视频播放器工具卡片 -->
            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-play-circle"></i></div>
                <h3>音视频播放器</h3>
                <p>在线播放音频和视频文件</p>
                <a href="https://ysloaner-aavp.onrender.com" target="_blank" class="tool-link">访问工具</a>
            </div>

            <!-- 新增时间戳转换器工具卡片 -->
            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-history"></i></div>
                <h3>时间戳转换器</h3>
                <p>时间戳与日期时间互转</p>
                <a href="https://sloaner-stc.onrender.com/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <!-- 语音转文本工具 -->
            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-microphone"></i></div>
                <h3>语音转文本</h3>
                <p>将语音转换为文本</p>
                <a href="https://sloaner-sttt.onrender.com/" target="_blank" class="tool-link">访问工具</a>
            </div>

            <!-- 文本转语音工具 -->
            <div class="tool-card">
                <div class="tool-icon"><i class="fas fa-volume-up"></i></div>
                <h3>文本转语音</h3>
                <p>将文本转换为语音</p>
                <a href="https://sloaner-ttst.netlify.app/" target="_blank" class="tool-link">访问工具</a>
            </div>
        </main>

        <footer>
            <p>&copy; 2025 Sloaner百宝箱 | 版权所有</p>
        </footer>
    </div>
    <script src="script.js"></script>
</body>

</html>